<template >
  <div class="drawing-detail">
    <div class="banner">
      <van-swipe :autoplay="3000" indicator-color="white" :show-indicators="false">
        <van-swipe-item v-for="(item,index) in bannerImgList" :key="index">
          <img :src="item" alt style="width:100%" @click="getImg('banner',item)" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <main class="main">
      <div class="info">
        <div class="title">图纸编号 {{data.BuildingName}}</div>
        <div class="detail">
          <div class="detail-item">
            <div class="item">
              <div class="span">占地面积约：</div>
              <div class="val">{{data.FloorSpace}}m²</div>
            </div>
            <div class="item">
              <div class="span">尺寸：</div>
              <div class="val">面宽{{data.Width}}m 进深{{data.Depth}}m</div>
            </div>
          </div>
          <div class="detail-item">
            <div class="item">
              <div class="span">建筑面积约：</div>
              <div class="val">{{data.BuildUpArea}}m²</div>
            </div>
            <div class="item">
              <div class="span">层数：</div>
              <div class="val">{{data.Storey}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="all-drawing">
        <div class="title">·图纸设计·</div>
        <div class="drawing-wrapper" v-html="renderingTag"></div>
      </div>
    </main>
  </div>
</template>

<script>
import { baseURL, getImg, getDrawingDetail } from '@/api/config'

import { ImagePreview } from 'vant'
export default {
  data () {
    return {
      data: {},
      DiagramID: '',
      // 焦点图图片和详情图片
      bannerImgList: [],
      renderingTag: ''
    }
  },

  methods: {
    // 初始化数据
    async getData () {
      var index = this.$store.state.detailIndex
      var data = this.$store.state.allDrawingList[index]
      // 防止刷新后丢失数据
      if (!data) {
        data = JSON.parse(sessionStorage.getItem('data'))
      } else {
        sessionStorage.setItem('data', JSON.stringify(data))
      }
      // 初始化页面banner图片数据 渲染的标签
      this.data = data
      this.bannerImgList.push(baseURL + getImg + this.data.Renderings)
      this.DiagramID = data.DiagramID
      let res = await this.get(baseURL + getDrawingDetail + this.DiagramID)
      this.renderingTag = res.data[0].Details
    },
    // 预览图片
    getImg (type, val) {
      switch (type) {
        case 'banner':
          ImagePreview({
            images: [val]
          })
          break
      }
    },
    // 为详情图片绑定事件
    clickFn () {
      document.querySelector('.drawing-wrapper').onclick = function (event) {
        ImagePreview({
          images: [event.target.src]
        })
      }
    }
  },
  mounted () {
    this.clickFn()
  },

  created () {
    this.getData()
  }
}
</script>

<style lang='stylus'>
.drawing-detail
  .banner
    position relative
    height 2.51rem
  .main
    position relative
    padding-top 0.665rem
    .info
      position absolute
      top -0.5rem
      left 50%
      transform translateX(-50%)
      width 3.44rem
      margin 0 auto
      background-color #fff
      box-shadow 0rem 0rem 0.15rem 0rem rgba(29, 167, 232, 0.15)
      border-radius 0.08rem
      .title
        color #333
        font-weight 700
        font-size 0.19rem
        line-height 0.19rem
        padding 0.25rem 0.14rem 0.07rem 0.14rem
      .detail
        border-top 1px solid #ebedef
        display flex
        padding 0.1rem 0.14rem 0.17rem 0.14rem
        .detail-item
          flex 1
          .item
            display flex
            padding 0.07rem 0
            .span
              line-height 0.13rem
              color #999
              font-weight 700
              font-size 0.13rem
            .val
              line-height 0.13rem
              color #333
              font-weight 700
              font-size 0.13rem
    .all-drawing
      overflow scroll
      width 3.44rem
      margin 0.25rem auto
      padding 0.25rem 0 0.15rem 0
      box-shadow 0rem 0rem 0.15rem 0rem rgba(29, 167, 232, 0.15)
      .title
        line-height 0.15rem
        margin-bottom 0.1rem
        color #1da7e8
        font-size 0.15rem
        font-weight 700
        text-align center
      .drawing-wrapper
        width 100%
        p
          display inline-block
          width 100%
          padding 0.1rem 0
          color #666
          font-size 0.13rem
          text-align center
          img
            display block
            width 100%
</style>
